<template>
  <i-page :loading="api.tableState.loading" :background="false" :shadow="false">

    <template #header>
      <a-page-header title="字典管理" sub-title="">
        <div class="d-flex justify-space-between pb-16">
          <a-typography-paragraph>
            管理员管理、查看并修改
          </a-typography-paragraph>

          <img
              class="image"
              :src="Img"
              alt="content"
              style="width: 200px;position: absolute;right: 80px;top: 0"
          />
        </div>
      </a-page-header>
    </template>

    <i-sheet radius class="pa-4 mb-4" shadow>
      <a-space >
        <i-attach-button :params="params" auto-select @update:active="onType">
          <template #append>
            <a-button  type="link" @click="onCreateType">
              添加
            </a-button>
          </template>
          <template #button="{record,active}">
            <a-dropdown :trigger="['contextmenu']" arrow placement="bottom">
              <template #overlay>
                <a-menu class="dictionary-type-menu">
                  <a-menu-item @click="onCreateChildren(record.value)">
                    添加子项
                  </a-menu-item>
                  <a-menu-item @click="api.onEdit(record.value)">
                    编辑
                  </a-menu-item>
                  <a-menu-item @click="api.onDelete(record.value)">
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button  :type="active?'primary':undefined">
                {{ record.label }}
              </a-button>
            </a-dropdown>
          </template>
        </i-attach-button>

      </a-space>
    </i-sheet>

    <i-sheet radius class="" shadow>
      <div class=" d-flex flex-column">
        <div class="pa-4 d-flex align-center justify-space-between">
          <a-space>
            <a-button plain type="primary" @click="onCreateChildren()">创建</a-button>
            <a-button plain icon="" @click="api.refreshTable()">刷新</a-button>
          </a-space>

        </div>

        <a-table
            :data-source="api.tableState.dataSource"
            :loading="api.tableState.loading"
            childrenColumnName="icesoft"
            :pagination="api.tableState.pagination"
            @change="(e:any)=>api.onTableChange(e)"
        >
          <a-table-column :width="240" title="类型名称" data-index="itemName" />
          <a-table-column :width="300" title="值" data-index="itemValue" />
          <a-table-column :width="160" title="取值字段" data-index="itemCode" />

          <a-table-column :width="64" title="排序" data-index="sortId" />
          <a-table-column title="备注" data-index="description" />

          <a-table-column key="action" title="操作" :width="200" align="center">
            <template #default="{ record }">
              <a-space class="fill-width">
                <a-button size="small" type="link" text @click="api.onDetail(record.id)">详情</a-button>
                <a-button size="small" text type="link" @click="api.onEdit(record.id)">编辑</a-button>
                <a-button size="small" text type="link" danger @click="api.onDelete(record.id)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </i-sheet>

    <Create :api="api"/>
    <Edit :api="api"/>
    <Detail :api="api"/>
  </i-page>
</template>

<script setup lang="ts">
import {ref} from "vue";
import Create from "./Create.vue";
import Edit from "./Edit.vue";
import Detail from "./Detail.vue";
import {DicApi} from "~/api/system/dic.api";
import IAttachButton from "~/components/attach/IAttachButton.vue";
import {AttachMore} from "~/icesoft/utils/service/types";
import Img from "~/assets/header/word.png";

const api = new DicApi();
const active = ref<any>();

const params: AttachMore = {
  target: "dictionary",
  label: "itemName",
  value: "id",
  condition: {
    parentId: "0",
  },
};

function onType(id: string) {
  api.load(id).then(res => {
    if (res.ok) {
      active.value = res.data;
    }
  });
  api.filterTable({ parentId: id });
}

function onCreateType() {
  api.onCreate();
  api.createState.title = "创建父级字典";
  api.createState.form.parentId = "0";
}

function onCreateChildren(id?: any) {
  if (!id) {
    id = active.value?.id;
  }
  api.load(id).then(res => {
    api.onCreate();
    const item: any = res.data as any;
    api.createState.title = "创建【" + item.itemName + "】子集字典";
    api.createState.form.parentId = item.id;
    api.createState.form.type = item.type;
  });
}
</script>

<style scoped lang="scss">

</style>
